import React, { Component } from 'react'

import { Route } from 'react-router-dom'

import { TabBar } from 'antd-mobile';

import News from '../News'
import List from '../List'
import Profile from '../Profile'
import Index from '../Index'

import '../../assets/fonts/iconfont.css'
import './home.css'


const dataList = [
    {
        title: '首页',
        key: 'Life',
        icon: 'icon-ind',
        path: '/home'
    }, {
        title: '找房',
        key: 'Koubei',
        icon: 'icon-findHouse',
        path: '/home/list'
    }, {
        title: '咨询',
        key: 'Friend',
        icon: 'icon-infom',
        path: '/home/news'
    }, {
        title: '我的',
        key: 'my',
        icon: 'icon-my',
        path: '/home/profile'
    },
]
export default class index extends Component {
    state = {
        selectedTab: this.props.location.pathname,
    };



    // 更新完成，参数之前的props
    componentDidUpdate(oldProps) {
        // 如果两次的 路径不同，就判断 navBar 选中的状态
        if (this.props.location.pathname !== oldProps.location.pathname) {
            this.setState({
                selectedTab: this.props.location.pathname,
            })
        }
    }


    render() {
        return (
            <div className="home">

                {/** 渲染子路由 */}
                <Route exact path="/home" component={Index}></Route>
                <Route path="/home/list" component={List}></Route>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/profile" component={Profile}></Route>


                {/** 底部 */}
                <TabBar
                    tintColor="#21b97a"
                    barTintColor="white"
                    noRenderContent={true}
                >
                    {
                        dataList.map(item =>
                            <TabBar.Item
                                title={item.title}
                                key={item.key}
                                icon={
                                    <i className={`iconfont ${item.icon}`}></i>
                                }
                                selectedIcon={<i className={`iconfont ${item.icon}`}></i>
                                }
                                selected={this.state.selectedTab === item.path}
                                onPress={() => {
                                    this.setState({
                                        selectedTab: item.path,
                                    });
                                    this.props.history.push(item.path)
                                }}
                            >
                            </TabBar.Item>
                        )
                    }
                </TabBar>
            </div>
        )
    }
}
